<template>
  <div ref="divDom">首页</div>
  <hr />
  <HelloWorld ref="helloCom"></HelloWorld>
  <button @click="btnClick">获取helloworld的组件实例</button>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

/*
  ref(vue2):
   1:获取dom
   2:获取组件实例对象

  ref(vue3):
   1:获取dom
     a:导入
     b:定义一个ref的响应式数据  const xxx=ref()/ref(null)
     c:原生标签  <div ref='xxx' ></div>
     d:访问dom:  xxx.value就是获取的dom
   2:获取组件实例对象
     a:导入
     b:定义一个ref的响应式数据  const xxx=ref()/ref(null)
     c:原生标签  <组件标签名 ref='xxx' ></组件标签名>
     d:访问dom:  xxx.value就是获取组件的实例对象
     f:组件内：
          需要暴露出来的属性或者方法等
          defineExpose({属性名/方法名})
          访问：xxx.value.属性名/方法名()
   3:定义响应式数据
     


*/
const divDom = ref()
onMounted(() => {
  console.log(divDom.value)
})

// 获取组件实例
const helloCom = ref(null)
const btnClick = () => {
  helloCom.value.fn()
  console.log(helloCom.value.xxx)
}
</script>
